<template>
  <div class="login-container">
    <a-form
      :model="formState"
      :rules="rules"
      ref="formRef"
      style="max-width: 400px; margin: auto"
    >
      <a-form-item label="百分网开发者平台">
        <h2>欢迎登录</h2>
      </a-form-item>
      <a-form-item name="loginType" v-if="formState.loginType === 'account'">
        <a-input
          v-model:value="formState.username"
          placeholder="请输入开发者账号"
        />
      </a-form-item>
      <a-form-item name="loginType" v-if="formState.loginType === 'phone'">
        <a-input v-model:value="formState.phone" placeholder="请输入手机号码" />
      </a-form-item>
      <a-form-item name="password" v-if="formState.loginType === 'account'">
        <a-input-password
          v-model:value="formState.password"
          placeholder="请输入密码"
        />
        <a href="/reset-password" style="float: right">忘记密码?</a>
      </a-form-item>
      <a-form-item name="captcha" v-if="formState.loginType === 'phone'">
        <a-input v-model:value="formState.captcha" placeholder="请输入验证码" />
        <a-button @click="getCaptcha" style="margin-top: 10px"
          >获取验证码</a-button
        >
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%">
          登录
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-checkbox v-model:checked="formState.agree">
          我已阅读并同意百分网《<a href="/developer-agreement">开发者协议条款</a
          >》和《<a href="/privacy-policy">隐私政策</a>》
        </a-checkbox>
      </a-form-item>
      <a-form-item style="text-align: center; margin-top: 16px">
        <span @click="switchLoginType" style="cursor: pointer">
          {{ formState.loginType === 'account' ? '验证码登录' : '密码登录' }}
        </span>
        <span style="margin: 0 8px">|</span>
        <a href="/register">开发者注册</a>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const formRef = ref(null)
    const formState = reactive({
      loginType: 'account',
      username: '',
      phone: '',
      password: '',
      captcha: '',
      agree: false,
    })

    const rules = {
      // 可以在这里定义表单验证规则
    }

    const onFinish = values => {
      console.log('Received values of form: ', values)
      // 在这里处理表单提交逻辑
    }

    const getCaptcha = () => {
      // 在这里处理获取验证码的逻辑
    }

    const switchLoginType = () => {
      formState.loginType =
        formState.loginType === 'account' ? 'phone' : 'account'
    }

    return {
      formState,
      rules,
      formRef,
      onFinish,
      getCaptcha,
      switchLoginType,
    }
  },
})
</script>

<style>
.login-container {
  padding: 20px;
  background: #f0f2f5;
  border-radius: 8px;
}
</style>
